<template>
  <div style="margin-bottom:10px">
    <el-button @click="getAllWGList('all')">所有</el-button>
    <el-button @click="getAllWGList('my')">我自己的</el-button>
    <el-button @click="getAllWGList('join')">我参与的</el-button>
    <el-button @click="getAllWGList('focus')">我关注的</el-button>
  </div>
  <el-table :data="appObject.tableData" border style="width: 100%" v-loading="appObject.loading">
    <el-table-column prop="name" label="WG名字" />
    <el-table-column prop="description" label="WG描述" />
    <el-table-column prop="schedule" label="WG日程" />
    <el-table-column prop="schedule" label="WG目录" />
    <el-table-column prop="creator" label="WG创建者" />
    <el-table-column prop="member" label="WG成员" />
  </el-table>
</template>

<script setup>
  import { reactive } from 'vue'
  import { getAllWG } from '../http/wgApi.js'
  
  const appObject = reactive({
    tableData: [],
    loading: true
  })
  
  getAllWG().then(res => {
    appObject.tableData = res.data.data
    appObject.loading = false
  })
  
  const getAllWGList = (e) => {
    appObject.loading = true
    setTimeout(() => {
      appObject.loading = false
    }, 1000 )
  }
</script>

<style scoped>
</style>
